<template>
	<!-- 	<u-popup v-model="show" mode="center" :zoom="false" :mask-close-able="false" border-radius="14" width="610rpx">
	 
	</u-popup> -->
	
	<u-mask :show="show" mode="center" bgColor="transparent" class="flex-column-center" style="justify-content: center;" >
		
		<view class="dialog-contianer">
			<view v-if="!isInput" class="message">{{message}}</view>
			<input  v-else placeholder="请输入" v-model="inputMsg" maxlength="20" type="number"/>
			<view class="boottom-btn-box flex-row">
				<view class="left-btn" @click="leftAction">{{leftText}}</view>
				<view class="right-btn" @click="rightAction">{{rightText}}</view>
			</view>
		</view>
	</u-mask>
</template>

<script>
	export default {
		name: "alert",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			isInput:{
				type: Boolean,
				default: false				
			},
			title: {
				type: String,
				default: '盲盒免单'
			},
			message: {
				type: String,
				default: 'white'
			},
			leftText: {
				type: String,
				default: '取消'
			},
			bigBackImage: {
				type: Boolean,
				default: false
			},
			rightText: {
				type: String,
				default: '确认'
			},
			isOneBtn: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				inputMsg:''
			};
		},
		methods: {
			leftAction() {
				this.$emit("leftAction")
			},
			rightAction() {
				this.$emit("rightAction",this.inputMsg)
			}
		}
	}
</script>

<style scoped lang="scss">
	.dialog-contianer {
		width: 560rpx;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);

		.message {
			font-size: 40rpx;
			font-weight: 500;
			width: 100%;
			text-align: center;
			margin-top: 86rpx;
		}

		.boottom-btn-box {
			width: 100%;
			height: 100rpx;
			border-radius: 0 0 20rpx 20rpx;
			font-size: 36rpx;
			font-weight: 700;
			border-top: 2rpx solid rgba(153, 153, 153, 1);
			margin-top: 72rpx;
			.left-btn {
				flex: 1;
				line-height: 100rpx;
				text-align: center;
				color: rgba(56, 192, 158, 1);
				border-right: 1rpx solid rgba(153, 153, 153, 1);
			}

			.right-btn {
				flex: 1;
				line-height: 100rpx;
				text-align: center; 
			}
		}
		input{
			font-size: 40rpx;
			font-weight: 500;
			width: 100%;
			padding-left: 48rpx;
			margin-top: 86rpx;
		}
	}
</style>
